<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>系统日志列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchFrm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">登陆名称:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="loginname"  placeholder="请输入登陆名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">开始时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="startDate" placeholder="请选择开始时间" id="startTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">结束时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="endDate" placeholder="请选择结束时间" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			    </div>
		   </div>
		</form>
	</blockquote>
	<table id="loginfoTable" class="layui-table" lay-filter="loginfoTable"></table>
	<!--表头-->
	<div id="loginfoTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm layui-btn-danger ToolBar" lay-event="batchdel" rel="batchdel"><span class="layui-icon">&#xe640;</span>批量删除</a>
	</div>
	<!--操作-->
	<div type="text/html" id="loginfoTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
	</div>
	
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['table','form','layer','laydate','jquery'],function(){
		var table=layui.table;
		var form=layui.form;
		var layer=layui.layer;
		var laydate=layui.laydate;
		var $=layui.jquery;
		
		//渲染时间选择器
		laydate.render({
			elem:'#startTime',
			type:'datetime'
		});
		laydate.render({
			elem:'#endTime',
			type:'datetime'
		});
		//渲染数据表格
		var tableIns=table.render({
			 elem: '#loginfoTable'
		    ,url:'/loginfo/getLoginfoList'
		    ,toolbar: '#loginfoTableToolBar' //开启头部工具栏，并为其绑定左侧模板
		    ,defaultToolbar: ['filter', 'print']
		    ,title: '日志数据表'
		    ,height:'full-150'
		    ,cols: [ [
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title:'ID',align:'center', fixed: 'left', unresize: true, sort: true}
		      ,{field:'loginname', title:'登陆名称',align:'center'}
		      ,{field:'loginip', title:'登陆IP',align:'center'}
		      ,{field:'logintime', title:'登陆时间',align:'center'}
		      ,{fixed: 'right', title:'操作', toolbar: '#loginfoTableRowBar',align:'center'}
		    ] ]
		    ,page: true
		});
		//模糊查询
		$("#doSearch").click(function(){
			var params=$("#searchFrm").serialize();
			tableIns.reload({
				url:'/loginfo/getLoginfoList?'+params,
			    page:{
			    	curr:1
			    }
			})
		});
		//监听表头按钮的事件
		$(".childrenBody").on("click",".ToolBar",function(){
		  switch($(this).attr("rel")){
		    case 'batchdel':
		      batchDelete();
		    break;
		  };
		});
		
		//监听行按钮的事件
		table.on('tool(loginfoTable)', function(obj){
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  if(layEvent === 'del'){ //删除
			    layer.confirm('真的删除行么', function(index){
			      //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			      layer.close(index);
			      //向服务端发送删除指令
			      $.post("/loginfo/delLoginfo",{id:data.id},function(obj){
			    	  if(obj.code==200){
			    		  tableIns.reload();//重载表格
			    	  }
			    	  layer.msg(obj.msg);
			      })
			    });
			  } 
			});
		
		//批量删除
		function batchDelete(){
			var checkStatus = table.checkStatus('loginfoTable'); //idTest 即为基础参数 id 对应的值
			console.log(checkStatus.data) //获取选中行的数据
			console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
			console.log(checkStatus.isAll ) //表格是否全选	
			if(checkStatus.data.length==0){
				layer.msg("请选中要删除的数据行");
			}else{
				layer.confirm('真的删除选中行么?', function(index){
				      layer.close(index);
				      var params="";
				      $.each(checkStatus.data,function(i,item){
				    	  if(i==0){
				    		  params+="ids="+item.id;
				    	  }else{
				    		  params+="&ids="+item.id;
				    	  }
				      });
				      //向服务端发送删除指令
				      $.post("/loginfo/batchDelLoginfo",params,function(obj){
				    	  if(obj.code==200){
				    		  tableIns.reload();//重载表格
				    	  }
				    	  layer.msg(obj.msg);
				      })
				 });
			}
		}
	});
</script>

</body>
</html>